<script setup lang="ts">
import { Login, Register, ResetPwd } from './components'

type IformType = 'login' | 'register' | 'resetPwd'
const formType: Ref<IformType> = ref('login')
const formComponets = {
  login: Login,
  register: Register,
  resetPwd: ResetPwd,
}

const appName = import.meta.env.VITE_APP_NAME
</script>

<template>
  <n-el class="wh-full flex-center" style="background-color: var(--body-color);">
    <div class="fixed top-40px right-40px text-lg">
      <DarkModeSwitch />
      <LangsSwitch />
    </div>
    <n-el
      class="sm:w-700px sm:h-450px flex"
      style="background: var(--card-color);box-shadow: var(--box-shadow-1);"
    >
      <n-el class="sm:w-345px flex">
        <SvgIconsLogo class="text-6em" />
        <n-h3>{{ appName }} </n-h3>
        <!-- <img src="@/assets/images/login_banner.webp" class="w-full" alt="login_banner" /> -->
      </n-el>
      <n-el class="sm:w-345px flex flex-center items-center">
        <transition
          name="fade-slide"
          mode="out-in"
        >
          <component
            :is="formComponets[formType]"
            v-model="formType"
            class="w-85%"
          />
        </transition>
      </n-el>
    </n-el>
  </n-el>
</template>
